<script setup lang="ts">
import { defineProps } from 'vue';

interface Property {
  label: string;
  value: string;
  unit: string;
}

interface Item {
  title: Property;
  [key: string]: Property;
}

const props = defineProps({
  items: {
    type: Array as () => Item[],
    required: true
  }
});
</script>

<template>
  <div>
    <el-card class="content-main" v-for="(item, index) in props.items" :key="index" shadow="hover">
      <div class="card-title">
        <router-link to="">{{ item.title }}</router-link>
      </div>
      <div
        v-for="(property, propIndex) in Object.keys(item).filter(
          (fn) => !(fn == 'status' || fn == 'title' || fn == 'partId')
        )"
        :key="propIndex"
        class="content-main-title"
      >
        <div class="title">{{ item[property].label }}：</div>
        <div class="value">{{ item[property].value }} {{ item[property].unit }}</div>
      </div>
    </el-card>
  </div>
</template>


<style scoped lang="scss">
.content-main {
  .content-main-title {
    margin-top: 10px;
    .title {
      display: inline-block;
      width: 60%;
    }
    .value {
      display: inline-block;
    }
  }
  .card-title a{
    font-family: 'Courier New', Courier, monospace;
        color: lightgreen;
        text-decoration: none;
  }
}
.content-main:nth-child(1) {
  width: 10.5%;
  position: absolute;
  top: 7%;
  left: 20.3%;
}
.content-main:nth-child(2) {
  width: 10.5%;
  position: absolute;
  top: 35%;
  left: 20.3%;
}
.content-main:nth-child(3) {
  width: 10.5%;
  position: absolute;
  top: 63%;
  left: 20.3%;
}
.content-main:nth-child(4) {
  width: 10.5%;
  position: absolute;
  top: 7%;
  left: 67.4%;
}
.content-main:nth-child(5) {
  width: 10.5%;
  position: absolute;
  top: 35%;
  left: 67.4%;
}
.content-main:nth-child(6) {
  width: 10.5%;
  position: absolute;
  top: 63%;
  left: 67.4%;
}
</style>